<template>
	<view class="swiperBg" :style="'padding-top:' + marginTop +'rpx;'">
		<block>
			<view class="swiper page_swiper " :style="'padding: 0 '+ paddinglr +'rpx;'" v-if="imgUrls.length">
				<swiper :indicator-dots="false" :autoplay="true" :circular="circular" :interval="interval"
					:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff"
					:style="'height:'+(imageH)+'rpx;'" :current="swiperCur" @change="swiperChange">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item :class="{ active: index == swiperCur }">
							<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
								<image :src="item.img" class="slide-image aa" :style="'height:'+ (imageH) +'rpx;'"
									mode="aspectFill"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>

				<!-- 地址选择 -->
				<view v-if="isShow" @click="toPage" class="box-addr c-333" :style="[{'top':(homeTop)+'rpx'}]">
					<text class="iconfont-yjgs ">&#xe6ed;</text>
					<text class="ml-10 mr-10 ">{{currentAddr.name || ''}}</text>
					<text class="iconfont-yjgs">&#xe655;</text>
				</view>
				<!-- end -->

				<!-- 搜索框 -->
				<view @click="searchClick" class="search-box"
					:style="[{'width':iwidth+'%'},{'bottom':(ibottom)+'px'},{'background':ibackground},{'borderRadius':iborderRadius+'px'},{justifyContent:iTextPost}]">
					<text class="iconfont icon-sousuo "></text>
					<text class="ml-10 c-999">请输入搜索关键词</text>
				</view>
				<!-- end -->

				<!-- 自定义 dot-->
				<view class="dots">
					<block v-for="(item,index) in imgUrls" :key="index">
						<view v-if="docConfig == 0" class="circular"
							:class="index == swiperCur ? 'circularActive' : '' "></view>
						<view v-if="docConfig == 1" class="square" :class="index == swiperCur ? 'squareActive' : '' ">
						</view>
					</block>
				</view>
				<!-- end -->

				<view style="height: 10rpx;"></view>

			</view>
		</block>
	</view>
</template>

<script>
	import {
		merPath
	} from "@/utils/index"
	export default {
		name: 'extendComb',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			merId: {}
		},
		data() {
			return {
				// 输入框相关
				iwidth: 90,
				ibottom: 5,
				ibackground: '#FFF',
				iborderRadius: 50,
				iTextPost: 'flex-start', // 输入框文字位置
				homeTop: 88,
				indicatorDots: false,
				isShow: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				imgUrls: [], //图片轮播数据
				bgColor0: this.dataConfig.isShow.val ? this.dataConfig.bgColor.color[0].item : 'transparent', //轮播背景颜色
				bgColor1: this.dataConfig.isShow.val ? this.dataConfig.bgColor.color[1].item : 'transparent', //轮播背景颜色
				marginTop: this.dataConfig.mbConfig.val * 2, //组件上边距
				paddinglr: this.dataConfig.lrConfig.val * 2, //轮播左右边距
				docConfig: this.dataConfig.docConfig.type, //指示点样式
				imgConfig: this.dataConfig.imgConfig.type, //是否为圆角
				txtStyle: this.dataConfig.txtStyle.type, //指示器位置
				imageH: 310,
				swiperCur: 0,
				swiperType: 1,
			};
		},
		watch: {
			imageH(nVal, oVal) {
				let self = this
				this.imageH = nVal
			}
		},
		computed: {
			currentAddr() {
				return this.$store.state.extend.currentAddr
			}
		},
		created() {
			this.imgUrls = this.dataConfig.swiperConfig.list;
			this.setConfig(this.dataConfig)
		},
		onReady() {
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
		},
		mounted() {
			let that = this;
			that.$nextTick(function() {
				uni.getImageInfo({
					src: this.$timer.ensureUrl(that.imgUrls[0].img),
					success: function(res) {
						if (res && res.height > 0) {
							let height = res.height * ((750 - 20) / res.width)
							that.$set(that, 'imageH', height);
						} else {
							that.$set(that, 'imageH', 375);
						}
					},
					fail: function(error) {
						that.$set(that, 'imageH', 375);
					}
				})
			})
		},
		methods: {
			searchClick() {
				uni.navigateTo({
					url: '/pages/columnGoods/goods_search/index'
				})
			},
			toPage() {
				uni.navigateTo({
					url: '/pages/extend/shop/city'
				})
			},
			setConfig(data) {
				if (!data) return
				this.iwidth = data.iwidth.val
				this.isShow = data.isShow.val
				this.ibackground = data.ibgColor.color[0].item
				this.iborderRadius = data.ibrStyle.val
				this.ibottom = data.ibotton.val
				this.iTextPost = data.iTextStyle.list[data.iTextStyle.type]['value']

				if (!this.isShow) {
					this.$store.commit('SET_currentAddr', {
						name: '',
						id: '',
						type: '',
						isShow: false,
					});
				}

			},

			swiperChange(e) {
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.swiperCur = e.detail.current;
				}
			},
			goDetail(url) {
				let urls = url.info[1].value
				urls = merPath(urls, this.merId)
				this.$util.JumpPath(urls);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.square {
		width: 30rpx;
		height: 6rpx;
		background-color: #AAAAAA;

	}

	.squareActive {
		background-color: white;
	}

	.circular {
		width: 12rpx;
		height: 12rpx;
		background-color: white;
		border-radius: 100%;
	}

	.circularActive {
		background-color: #D22C25;
		width: 30rpx;
		border-radius: 60rpx;
	}

	.dots {
		grid-gap: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 80rpx;
		width: 100%;
		height: 50rpx;
	}

	.search-box {
		z-index: 999;
		position: absolute;
		display: flex;
		align-items: center;
		width: 90%;
		height: 72rpx;
		line-height: 72rpx;
		padding: 20rpx;
		cursor: pointer;
		background-color: white;
		left: 50%;
		transform: translateX(-50%);
	}

	.box-addr {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 30px;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 100px;
		color: #333;
		position: absolute;
		left: 20px;
		width: 200rpx;
		height: 60rpx;
	}

	.swiperBg {
		position: relative;
		background: transparent;
		z-index: 1;


		.colorBg {
			position: absolute;
			left: 0;
			top: 0;
			height: 130rpx;
			width: 100%;
		}

		.page_swiper {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			height: auto;
			margin: 0 auto;
			border-radius: 10rpx;
			overflow-x: hidden;
			/* #ifdef MP */
			z-index: 20;

			/* #endif */
			/* 设置圆角 */
			&.fillet {

				.swiper-item,
				image,
				.acea-row.row-between-wrapper {
					border-radius: 10rpx;
				}
			}

			.swiper-item,
			image,
			.acea-row.row-between-wrapper {
				width: 100%;
				height: 100%;
				margin: 0 auto;
			}

			swiper {
				width: 100%;
				display: block;
				height: auto;
			}

			image {
				transform: scale(0.93);
				transition: all 0.6s ease;
			}

			swiper-item.active {
				image {
					transform: scale(1);
				}
			}
		}
	}

	.item-img image {
		display: block;
		width: 100%;
	}
</style>